<template>
	<view class="editMyInfo">
		<!-- <header-box :title="pageTitle"></header-box> -->
		<view class="editMyInfo-box" v-if="userInfo">
			<view class="edit-avatar">
				<image class="edit-avatar-img" :src="userInfo.avatar || avatar" mode=""></image>
				<view class="edit-avatar-box" @click="chooseImg">
					<u-icon class="edit-avatar-upload" name="camera" color="#ffffff" size="40"></u-icon>
				</view>
			</view>
			<view class="edit-box">
				<view class="edit-main">
					<view class="edit-main-item">
						<view class="edit-main-item-title"><text>你的昵称</text></view>
						<input class="edit-main-item-nickName" type="text" v-model.trim="userInfo.userName" />
					</view>
					<view class="edit-main-item">
						<view class="edit-main-item-title"><text>性别</text></view>
						<view class="edit-main-item-content" @click="offerPopupOpen">
							<text>{{userInfo.gender === 0?'男':userInfo.gender == 1?'女':'未知'}}</text>
							<image class="edit-main-item-icon" src="../../static/img/right-icon.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			
			<view class="edit-confirm" @click="saveUserInfo"><text>保存</text></view>
		
		</view>
		<!-- 性别选择 弹窗 -->
		<u-popup :show="offerShow" :round="20" mode="bottom" :overlayOpacity="0.8" @close="offerPopupClose" @open="offerPopupOpen" bgColor="transparent">
			<view class="offerPopup">
				<view class="offerPopup-line"></view>
				<view class="offerPopup-main">
					<view class="offerPopup-title"><text>请选择你的性别</text></view>
					<view class="sex-item" @click="userInfo.gender = 0,offerShow = false">
						<text>男</text>
						<view class="_item-check" :class="userInfo.gender === 0?'_item-check-active':''">
							<u-icon name="checkbox-mark" color="#ffffff" size="24" v-if="userInfo.gender === 0"></u-icon>
						</view>
					</view>
					<view class="sex-item" @click="userInfo.gender = 1,offerShow = false">
						<text>女</text>
						<view class="_item-check" :class="userInfo.gender == 1?'_item-check-active':''">
							<u-icon name="checkbox-mark" color="#ffffff" size="24" v-if="userInfo.gender == 1"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import uploadImage from '@/common/ossutil/uploadFile.js';
	export default {
		data() {
			return {
				pageTitle:'编辑',
				offerShow:false,
				sex:0, // 0 男  1 女
				userInfo:{
					userName:'',
					gender:0,
					avatar:''
				},
				avatar:require('@/static/img/careful-icon.png'),
				saveUserInfoFlag:true,
			};
		},
		onLoad() {
			if (uni.getStorageSync('userInfo')) {
				this.userInfo = uni.getStorageSync('userInfo');
			} else {
				if (uni.getStorageSync('token')) {
					this.getUserInfo()
				} else {
					this.checkLogin(`/pages/editMyInfo/editMyInfo`)
				}
			}
		},
		methods:{
			offerPopupOpen() {
				this.offerShow = true;
			},
			offerPopupClose() {
				this.offerShow = false
				// console.log('close');
			},
			getUserInfo(type) {
				this.$api.getUserInfo().then(res => {
					console.log(res)
					if (res.code == 200) {
						this.userInfo = res.data;
						uni.setStorageSync('userInfo',res.data)
						if (type) {
							this.saveUserInfoFlag = true
							uni.showToast({
								title:'保存成功',
								icon:'none'
							})
							setTimeout(() => {
								uni.navigateBack({
									delta:1
								})
							},800)
						}
					} else {
						this.checkLogin(`/pages/editMyInfo/editMyInfo`)
					}
				})
			},
			chooseImg() {
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album','camera'], //从相册选择
				    success: (res) => {
				        // console.log(JSON.stringify(res.tempFilePaths));
						console.log(res)
						if ((res.tempFiles[0].size / 1024 / 1024).toFixed(0) < 5) {
							// 锁住保存按钮
							this.saveUserInfoFlag = false
							this.userInfo.avatar = res.tempFilePaths[0];
							this.avatar = res.tempFilePaths[0];
							//上传图片
							//图片路径可自行修改
							uni.showLoading({
								mask:true
							})
							uploadImage(res.tempFilePaths[0], '',
							    result => {
									// console.log(result)
									this.userInfo.avatar = result;
									this.avatar = result;
									uni.hideLoading();
								},
								err => {
									// console.log(err)
									uni.hideLoading();
								}
							)
							this.saveUserInfoFlag = true
						} else {
							uni.showToast({
								title:'图片太大了，请重新上传',
								icon:'none'
							})
						}
				    }
				});
			},
			saveUserInfo() {
				if (!this.saveUserInfoFlag) return false
				if (!this.userInfo.userName) {
					uni.showToast({
						title:'昵称不能为空',
						icon:'none'
					})
					return false
				}
				this.saveUserInfoFlag = false
				this.$api.getUpdUserInfo(this.userInfo).then(res => {
					console.log(res)
					if (res.code == 200) {
						this.getUserInfo(1)
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.editMyInfo{
		width: 100%;
		min-height: 100vh;
		background-color: #16181D;
		font-family: PingFangSC-Medium, PingFang SC, '微软雅黑';
		font:caption;
		display: flow-root;
		.editMyInfo-box{
			
		}
		.edit-avatar{
			width: 248rpx;
			height: 248rpx;
			border-radius: 50%;
			margin: 90rpx auto 0;
			overflow: hidden;
			position: relative;
			.edit-avatar-img{
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
			.edit-avatar-box{
				width: 100%;
				height: 100%;
				background-color: rgba(157,125,255,0.4);
				position: absolute;
				top: 0;
				display: flex;
				justify-content: center;
				.edit-avatar-upload{
					
				}
			}
		}
		.edit-box{
			padding: 0 48rpx;
			box-sizing: border-box;
			margin-top: 80rpx;
			.edit-main{
				width: 100%;
				.edit-main-item{
					width: 100%;
					margin-top: 56rpx;
					.edit-main-item-title{
						font-size: 24rpx;
						font-weight: 400;
						color: #5E6272;
						line-height: 32rpx;
					}
					.edit-main-item-nickName{
						width: 100%;
						height: 60rpx;
						font-size: 32rpx;
						color: #FFFFFF;
						line-height: 48rpx;
						margin-top: 32rpx;
						border-bottom: 2rpx solid #262A34;
						padding-bottom: 24rpx;
					}
					.edit-main-item-content{
						font-size: 32rpx;
						color: #FFFFFF;
						line-height: 48rpx;
						position: relative;
						margin-top: 32rpx;
						border-bottom: 2rpx solid #262A34;
						padding-bottom: 24rpx;
						.edit-main-item-icon{
							width: 20rpx;
							height: 30rpx;
							min-width: 20rpx;
							position: absolute;
							top: 0;
							left: 0;
							right: 0;
							bottom: 0;
							margin: auto;
							margin-right: 38rpx;
						}
					}
				}
			}
		}
		.edit-confirm{
			width: 686rpx;
			height: 88rpx;
			background: linear-gradient(223deg, #A339D8 0%, #6948F2 100%);
			border-radius: 45rpx;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			margin-bottom: 32rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
		}
	}
	.offerPopup{
		width: 100%;
		height: 356rpx;
		border-top-left-radius: 48rpx;
		border-top-right-radius: 48rpx;
		background: #262A34;
		font-family: PingFangSC-Medium, PingFang SC, '微软雅黑';
		font:caption;
		.offerPopup-line{
			width: 176rpx;
			height: 8rpx;
			margin: 16rpx auto 0;
			background: #5E6272;
			border-radius: 200rpx;
		}
		.offerPopup-main{
			padding: 40rpx 50rpx 0 64rpx;
			box-sizing: border-box;
		}
		.offerPopup-title{
			font-size: 20rpx;
			font-weight: 600;
			color: #5E6272;
		}
		.sex-item{
			width: 100%;
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;
			align-items: center;
			font-size: 32rpx;
			font-weight: 600;
			color: #FFFFFF;
			margin-top: 40rpx;
			border-bottom: 2rpx solid rgba(255,255,255,0.05);
			padding-bottom: 40rpx;
			._item-check{
				width: 48rpx;
				height: 48rpx;
				border-radius: 50%;
				border: 2rpx solid rgba(255, 255, 255, 0.4);
				margin-right: 48rpx;
			}
			._item-check-active{
				width: 48rpx;
				height: 48rpx;
				border-radius: 50%;
				border: none;
				margin-right: 48rpx;
				background: linear-gradient(223deg, #A339D8 0%, #6948F2 100%);
			}
		}
		.sex-item:last-child{
			border-bottom: 0;
		}
	}
</style>
